$def with (cameraopts,cameradefaults)

$var title: Camera

<style>
.title-subpane
{
	width:100%;
	height:50px;
	vertical-align:center;
	text-align:center;
	font-weight:bold;
	font-size:large;
}

.photo-subpane
{
	min-height:300px;
	width:100%;
    vertical-align: middle;	
	background-color:grey;
}

.control-photo-subpane
{	
	width: 100%;
	height: 70px;
	text-align: center;		
	
	display: inline-block;	
	vertical-align: middle;
}

.control-photo-subpane a
{	
	margin-left:10px;
	margin-right:10px;	
}

.control-photo-subpane p
{	
	font-weight:bold;
}

.main-photo-pane
{	
	float: left;

	margin-right:1%;
	margin-bottom:1%;
	padding:2%;
	border:0px;
	background:none;
	
	width: 45%;
}

#form-camera-opts table
{
	padding:10px;
}
#form-camera-opts select
{
	width: 100%
}

#form-camera-opts span
{
	font-weight: bold;
}

#form-camera-opts td 
{
	padding-left:5px;
	padding-right:5px;
	padding-top:2px;
	padding-bottom:2px;
}

#form-camera-opts #submit-button
{
	width:100%;
}

</style>

<script>
function onBeforePost(selector)
{
	var ctrl_res = $$(selector);
	ctrl_res.text("");
}

function onPostResult(selector,data)
{
	var ctrl_res = $$(selector);
	ctrl_res.text(data);		
	if( data.indexOf("Failed") != -1 )
			ctrl_res.css('background-color','red');
	else	ctrl_res.css('background-color','green');
}

function capturePhoto()
{
	var ctrl_img = $$("#builtin-camera-photo");
	$$(".control-photo-subpane #response").text("");
	
	onBeforePost(".control-photo-subpane #response");
	
	//	Capture
	$$.post("camera?action=capture", function(data) {
		onPostResult(".control-photo-subpane #response",data);
		ctrl_img.attr('src','/static/camera/latest.jpg?rand=' + Math.random());
	});
	
	event.preventDefault();
}

function cameraLiveToggle(id_anchor,id_img,callback) {
	var ctrl_anchor = $$("#"+id_anchor);
	var ctrl_refresh = $$("#"+id_anchor+"-refresh");
	var ctrl_img = $$("#"+id_img);
	
	//	If text is live, start video else stop
	if( ctrl_anchor.text() == "Live" ) {
		
		//	Change text and appereance
		ctrl_anchor.text("Still");
		ctrl_anchor.css("color","red");
		
		//	Set load handler and trigger auto-refresh
		ctrl_img.load(callback);
		ctrl_refresh.unbind("click");
		callback();
	} else {
		ctrl_anchor.text("Live");
		ctrl_anchor.css("color","#99FF66");
		ctrl_refresh.click(callback);
		ctrl_img.unbind("load");
	}
	
	event.preventDefault();
}

function extCameraRefresh(id) {
	$$("#" + id).attr(
		'src',
		'http://mahome.asuscomm.com:8090/snapshot.cgi?next_url=tempsnapshot.jpg&rand=' + Math.random());	
		
	event.preventDefault();
}

function cmdBuiltinCameraMove(steps){

	onBeforePost(".control-photo-subpane #response");
	
	//	Get action
	$$.get("/command?cmd=sm s:" + steps, function(data) {
		if( data.length == 0 )
			data = "Moved";
			
		onPostResult(".control-photo-subpane #response",data);
	});
	
	event.preventDefault();
};

function submitCameraOpts()
{
	var form = $$("#form-camera-opts");
	var post_data = form.serialize();
	
	onBeforePost("#form-camera-opts #response");
	
	$$.post("camera?action=setopt&"+post_data,function(data){
		onPostResult("#form-camera-opts #response",data);
	});
	
	event.preventDefault();
}

function submitCameraOptsResetToDefault()
{
	onBeforePost("#form-camera-opts #response");
	
	$$.post("camera?action=optreset",function(data){
		onPostResult("#form-camera-opts #response",data);
		if( data.indexOf("Failed") == -1 )
			setTimeout(function(){location.reload()},1000);
	});
}

</script>

<div class="main-photo-pane ui-widget-content">
	<div class="title-subpane">
		Built-in camera
	</div>	
	<div class="photo-subpane">
		<img id="builtin-camera-photo" src="/static/camera/latest.jpg" alt="No image" style="width:100%;">
	</div>	
	<div id="rbi-photo-control" class="control-photo-subpane">
		<a href="#" id="steps" onclick="cmdBuiltinCameraMove(100)"><<<</a>
		<a href="#" id="steps" onclick="cmdBuiltinCameraMove(50)"><<</a>
		<a href="#" id="steps" onclick="cmdBuiltinCameraMove(10)"><</a>
		<a href="#" id="builtinCameraLive-refresh" onclick="capturePhoto()">Capture</a>
		<a href="#" id="steps" onclick="cmdBuiltinCameraMove(-10)">></a>
		<a href="#" id="steps" onclick="cmdBuiltinCameraMove(-50)">>></a>
		<a href="#" id="steps" onclick="cmdBuiltinCameraMove(-100)">>>></a>
		<a href="#" id="builtinCameraLive" onclick="cameraLiveToggle(this.id,'builtin-camera-photo',capturePhoto)" style="color:#99FF66;">Live</a>
		<p id="response">&nbsp;</p>
	</div>
</div>

<div class="main-photo-pane ui-widget-content">
	<div class="title-subpane">
		External camera
	</div>	
	<div class="photo-subpane">
		<img id="extCameraPhoto" width="100%" alt="video" src="http://mahome.asuscomm.com:8090/snapshot.cgi?next_url=tempsnapshot.jpg&rand=0" >		
	</div>	
	<div class="control-photo-subpane" id="ext-photo-control" style="text-align:left;">		
		<iframe src="http://mahome.asuscomm.com:8090/mobile.html" height="40px" width="160px" scrolling="no" style="overflow:hidden;border:0;"></iframe>
		<a href="#" id="extCameraLive" onclick="cameraLiveToggle(this.id,'extCameraPhoto',function(){extCameraRefresh('extCameraPhoto');})" style="color:#99FF66;">Live</a>
		<a href="#" id="extCameraLive-refresh" onclick="extCameraRefresh('extCameraPhoto')">Refresh</a>
	</div>
</div>
<div style="clear:both;"></div>

$def AddToForm(name,option,value,rangestep=5):	
	<tr>
	<td><span>$name</span></td>
	$if type(value)==type({}):
		<td><select name="$option" class="ui-widget-content">
		$for key, val in value.iteritems():
			<option value="$val" $("selected" if val == cameradefaults.get(option,"") else "")>$key</option>
		</select></td>
	$elif type(value)==type([]):
		<td><select name="$option" class="ui-widget-content">
		$for item in value:
			<option value="$item" $("selected" if item == cameradefaults.get(option,"") else "")>$item</option>
		</select></td>
	$elif type(value)==type(u""):
		<td><select name="$option" class="ui-widget-content">
		$for x in xrange(int(value.split('|')[0]),int(value.split('|')[1])+1,rangestep):
			<option value="$x" $("selected" if "%s"%x == cameradefaults.get(option,"") else "")>$x</option>
		</select></td>
	</tr>

<form id="form-camera-opts" action="javascript:submitCameraOpts()" enctype="multipart/form-data" >
	<table class="ui-widget-content">
		$:AddToForm("Image size","size",cameraopts["size"])
		$:AddToForm("Quality","quality",cameraopts["quality"])
		$:AddToForm("Exposure","exposure",cameraopts["exposure"])
		$:AddToForm("Timeout(s)","timeout",cameraopts["timeout"],rangestep=1)
		$:AddToForm("Auto white balance","awb",cameraopts["awb"])
		$:AddToForm("Image effect","ifx",cameraopts["ifx"])
		$:AddToForm("Metering","metering",cameraopts["metering"])
		$:AddToForm("Brightness","brightness",cameraopts["brightness"])
		$:AddToForm("Sharpness","sharpness",cameraopts["sharpness"])
		$:AddToForm("Contrast","contrast",cameraopts["contrast"])	
		$:AddToForm("Saturation","saturation",cameraopts["saturation"])
	<tr>
		<td><input type="button" id="submit-button" value="Reset defaults" class="ui-widget-content" onclick="submitCameraOptsResetToDefault()"/></td>
		<td><input type="submit" id="submit-button" value="Apply" class="ui-widget-content"/></td>
	</tr>
	<tr><td colspan=2>
	<p id="response">&nbsp;</p>
	</td></tr>		
	</table>
	
</form>